<template>
  <div>
    <div class="d1">我的收藏</div>
    <div class="d2">
      <div class="d3" v-for="(item, index) in list" :key="index">
        <p class="p1" @click="sc(item)">x</p>
        <img :src="item.product_picture" alt="" />
        <p>{{ item.product_name }}</p>
        <p class="pse">{{ item.product_intro }}</p>
        <p>{{ item.product_price }}</p>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  beforeRouteEnter(to, from, next) {
    // ...next 是否登陆
    var token = sessionStorage.getItem("token");
    if (token == null) {
      next("/home");
    }
    next();
  },
  data() {
    return {
      list: [],
    };
  },
  mounted() {
    this.hq();
  },
  methods: {
    hq() {
      //获取收藏
      this.$axios
        .post("/api/user/collect/getCollect", {
          user_id: sessionStorage.getItem("token"),
        })
        .then((a) => {
          if (a.code == "001") {
            this.list = a.collectList;
            this.list.map((a) => {
              return (a.product_picture = `http://47.115.85.237:3000/${a.product_picture}`);
            });
          }
          console.log(a);
        });
    },
    sc(a) {
      this.$axios
        .post("/api/user/collect/deleteCollect", {
          user_id: sessionStorage.getItem("token"),
          product_id: a.product_id,
        })
        .then((a) => {
          if (a.code == "001") {
            this.$message.success(a.msg);
            this.hq();
          } else {
            this.$message(a.msg);
          }
        });
    },
  },
};
</script>
<style scoped>
.d1 {
  width: 100%;
  font-size: 27px;
  height: 70px;
  line-height: 90px;
  border-bottom: orangered 1px solid;
}
.d2 {
  background: #f4f5f6;
  width: 100%;
  display: flex;
  text-align: center;
  flex-wrap: wrap;
  padding-top: 3%;
}
.d3 {
  margin-bottom: 3%;
  width: 22%;
  height: 430px;
  background: #ffffff;
  margin-left: 3%;
}
p {
  margin-bottom: 2%;
  margin: 0;
  margin-top: 3%;
}
.pse {
  width: 90%;
  margin: auto;
  overflow: hidden;

  height: 19px;
}
.p1 {
  text-align: right;
}
img {
  width: 90%;
  height: 70%;
}
</style>